
  
<template>
    <div class="dashboard-container">
        <el-row :gutter="10">


            <el-col :span="18">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;">登录轨迹</span>
                    </div>
                    <el-calendar>
                        <template slot="dateCell" slot-scope="{date, data}">

                            <p>
                                {{ data.day.split('-').slice(1).join('-') }} {{ loginTimePeriod.indexOf(data.day) != -1 ?
                                    '已登录'
                                    : '' }}
                            </p>
                        </template>
                    </el-calendar>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;">用户信息</span>
                    </div>
                    <div style="display: flex;flex-direction: row;">
                        <div>

                            <el-avatar v-if="avatar" style="width: 160px;height: 160px;" :src="avatar"></el-avatar>
                            <el-avatar v-else style="width: 160px;height: 160px;"
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        </div>
                        <div style="margin-left:40px">
                            <p style="font-weight: bold;font-size: 25px;">{{ name }}</p>
                            <p><el-tag type="success">{{ roleTypeFormat }}</el-tag></p>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <p>欢迎您的到来!</p>

                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 10px;">
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;">日新用户统计</span>

                    </div>
                    <div class="echart" id="NewUserNumberByDay" :style="{ float: 'left', width: '100%', height: '400px' }">
                    </div>
                </el-card>
            </el-col>
        </el-row>


    </div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import * as echarts from "echarts";

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import ImageModule from 'docxtemplater-image-module-free'
export default {
    name: 'Dashboard',
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'loginTimePeriod', "user"
        ])
    },
    NewUserNumberByDay: null,
    data() {
        return {
        };
    },
    mounted() {
        this.GetNewUserNumberByDayApi();
    },
    methods: {
        async GetNewUserNumberByDayApi() {

            let { data } = await this.$Post("/User/GetNewUserNumberByDay", {});
            console.log("data", data);
            const option = {
                title: {
                    text: "数据来源系统分析"
                },
                tooltip: {},
                legend: {
                    data: ["绘本类型"]
                },
                xAxis: {
                    data: data.Label
                },
                yAxis: {},
                series: [
                    {
                        name: "日新增数",
                        type: "bar", //类型为柱状图
                        data: data.Value
                    }
                ]
            };
            this.myChart = echarts.init(document.getElementById("NewUserNumberByDay"));// 图标初始化
            this.myChart.setOption(option);// 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });

        },

        // 导出echarts图片，格式转换
        base64DataURLToArrayBuffer(dataURL) {
            const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
            if (!base64Regex.test(dataURL)) {
                return false;
            }
            const stringBase64 = dataURL.replace(base64Regex, "");
            let binaryString;
            if (typeof window !== "undefined") {
                binaryString = window.atob(stringBase64);
            } else {
                binaryString = new Buffer(stringBase64, "base64").toString("binary");
            }
            const len = binaryString.length;
            const bytes = new Uint8Array(len);
            for (let i = 0; i < len; i++) {
                const ascii = binaryString.charCodeAt(i);
                bytes[i] = ascii;
            }
            return bytes.buffer;
        },
        // 导出文档
        exportWord() {

            // 点击导出word
            let _this = this;
            // 读取并获得模板文件的二进制内容
            JSZipUtils.getBinaryContent("/simple.docx", function (error, content) {
                // exportTemplate.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
                // 抛出异常
                if (error) {
                    throw error;
                }
                // 图片处理
                let opts = {}
                opts.centered = true;  // 图片居中，在word模板中定义方式为{%%image}
                opts.fileType = "docx";
                opts.getImage = function (chartId) {
                    console.log("执行了");
                    return _this.base64DataURLToArrayBuffer(chartId);
                }
                opts.getSize = function () {
                    return [1000, 400]
                }
                let imageModule = new ImageModule(opts);
                // 创建一个PizZip实例，内容为模板的内容
                let zip = new PizZip(content);
                // 创建并加载docxtemplater实例对象
                let doc = new docxtemplater();
                doc.attachModule(imageModule);
                doc.loadZip(zip);

                // 设置模板变量的值
                doc.setData({
                    description: "测试文案",
                    img: _this.myChart.getDataURL() // 获取echarts图片
                });

                try {
                    // 用模板变量的值替换所有模板变量
                    doc.render();
                } catch (error) {
                    // 抛出异常
                    let e = {
                        message: error.message,
                        name: error.name,
                        stack: error.stack,
                        properties: error.properties
                    };
                    throw error;
                }
                // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
                let out = doc.getZip().generate({
                    type: "blob",
                    mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                });
                // 将目标文件对象保存为目标类型的文件，并命名
                saveAs(out, "exportDocx.docx");
            });
        }
    }


}
</script>
  
<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>
  
  
  
 
 
 
  